<template>
  <div
    class="heroe-headimg"
    :class="{ auto: auto }"
    v-if="heroe"
    @click="heroeDetails"
  >
    <img class="avatar" :type="heroe.quality" :src="heroe.avatar" alt="" />

    <div class="country" :type="heroe.country">
      <img v-if="heroe.country === 1" src="../../assets/wei.svg" alt="" />
      <img v-if="heroe.country === 2" src="../../assets/shu.svg" alt="" />
      <img v-if="heroe.country === 3" src="../../assets/wu.svg" alt="" />
      <img v-if="heroe.country === 4" src="../../assets/qun.svg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    heroeId: Number,
    name: {
      type: Boolean,
      default: () => false,
    },
    auto: {
      type: Boolean,
      default: () => false,
    },
    click: {
      type: Boolean,
      default: () => true,
    },
  },
  name: "HeroeHeadimg",
  data() {
    return {
      heroe: null,
    };
  },
  watch: {
    heroeId() {
      this.$store.dispatch("data/getHeroe", this.heroeId).then((res) => {
        this.heroe = res;
      });
    },
  },
  created() {
    this.$store.dispatch("data/getHeroe", this.heroeId).then((res) => {
      this.heroe = res;
    });
  },
  methods: {
    heroeDetails() {
      if (!this.click) return;
      this.$router.push("/heroe/" + this.heroe.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.heroe-headimg {
  width: 0.53rem;
  height: 0.53rem;
  position: relative;
  font-size: 0;
  img {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    box-sizing: border-box;
  }
  &.auto {
    width: 100%;
    height: 0;
    padding-top: 100%;
    .avatar {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .avatar {
    border-radius: 0.05rem;
    &[type="4"] {
      border: 2px solid #f2ae32;
    }
    &[type="3"] {
      border: 2px solid #9363de;
    }
    &[type="2"] {
      border: 2px solid #7baefd;
    }
    &[type="1"] {
      border: 2px solid #99cfaa;
    }
  }
  .country {
    position: absolute;
    width: 0.16rem;
    height: 0.16rem;
    bottom: 0.02rem;
    right: 0.02rem;
    font-size: 0;
    z-index: 2;
    img {
      width: 100%;
    }
  }
}
</style>
